import { useIntersectionObserver } from '@vueuse/core'
import load from '@/assets/images/load.gif'
export default {
  install (app) {
    app.directive('test', {
      mounted (dom, binding) {
        console.log(dom, binding)
      }
    })

    app.directive('imglazy', {
      mounted (imgDom, binding) {
        // 懒加载数据
        const { stop } = useIntersectionObserver(
          imgDom,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              imgDom.src = load
              // 元素src属性赋值
              setTimeout(() => {
                imgDom.src = binding.value
              }, 300)
              // 没有找到图片
              imgDom.onerror = () => {
                imgDom.src = load
              }
              // 停止监测  防止重复调用
              stop()
            }
          },
          {
            // 阈值 提高渲染速度
            threshold: 0
          }
        )
      }
    })
  }
}
